<template>
  <div>
    <el-form ref="form" :model="importForm" :rules="importRules" label-width="80px">
      <el-form-item label="参数类型" prop="type">
        <el-select v-model="importForm.type" placeholder="请选择参数类型">
          <el-option v-for="item in extPortConfigType" :key="item.value" :value="item.value" :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="导入数据" prop="jsonData">
        <MyCodeMirror @input="getMyCode" ref="codeMirror" v-if="codeMirror" :value="formatCode(importForm.jsonData)"/>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitImportForm">确 定</el-button>
      <el-button @click="cancalButton">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import MyCodeMirror from '@/components/CodeMirror/index.vue';
  //使用js-beautify格式化js代码
  import {js_beautify} from 'js-beautify';
  import {importExcPortConfig} from "@/api/pm/excPortConfig";

  import {extPortConfigType} from './js/type';


  export default {
    name: "importData",
    components:  {MyCodeMirror},
    props: {
      portId: String,
      type: {
        type: String | Number,
        default: 1
      },
      saveType: {
        type: String | Number,
        default: 1
      }
    },
    data() {
      return {
        importForm: {
          portId: this.portId,
          // 参数类型
          type: this.type,
          jsonData: ''
        },
        extPortConfigType: extPortConfigType,

        importRules: {
          type: [
            {required: true, message: '参数类型不能为空', trigger: 'change'}
          ]
        },

        codeMirror: true,

      }
    },
    methods: {
      // 导入提交
      async submitImportForm() {
        let res = await importExcPortConfig(this.importForm, this.saveType);

        this.importForm.jsonData = '';
        this.$emit("submitImport", res);
      },

      // 导入取消按钮
      cancalButton() {
        this.importForm.jsonData = '';
        this.$emit('cancalImportDialog', false)
      },

      //获取编写的js代码
      getMyCode(value) {
        if (!value) return '';
        this.myCode = value;
        // this.funcForm.executeMain = value.replace(/\n|\r|\r\n|\t/g,"");
        this.importForm.jsonData = value.replace(/\n|\r|\r\n|\t/g, "");
      },

      // 格式化js代码
      formatCode(code) {
        return code ? js_beautify(code) : '';
      },
    }

  }
</script>

<style scoped>

</style>
